<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>login</title>

        <link rel="stylesheet" href=<s:url value="/jquery/css/custom-theme/jquery-ui-1.8.10.custom.css"/>>
        <link rel="stylesheet" href=<s:url value="/css/tcc-sglj-global-css.css"/>>        
        <link rel="stylesheet" href=<s:url value="/css/tcc-sglj-menu-toolbar.css"/>>
        <link rel="stylesheet" href=<s:url value="/css/tcc-sglj-cadastro-usuario-log.css"/>>
        <link rel="stylesheet" href=<s:url value="/css/tcc-sglj-sistema.css"/>>
        <link rel="stylesheet" href=<s:url value="/jqgrid/css/ui.jqgrid.css"/>>
        <link rel="stylesheet" href=<s:url value="/css/button.add.css"/>>

        <script language="javascript" type="text/javascript" src=<s:url value="/jquery/js/jquery-1.4.4.min.js"/>></script>
        <script language="javascript" type="text/javascript" src=<s:url value="/jquery/js/jquery-ui-1.8.10.custom.min.js"/>></script>
        <script language="javascript" type="text/javascript" src=<s:url value="/jquery/development-bundle/ui/jquery.ui.core.js"/>></script>
        <script language="javascript" type="text/javascript" src=<s:url value="/jquery/development-bundle/ui/jquery.ui.widget.js"/>></script>
        <script language="javascript" type="text/javascript" src=<s:url value="/jquery/development-bundle/ui/jquery.ui.button.js"/>></script>
        <script language="javascript" type="text/javascript" src=<s:url value="/jquery/development-bundle/ui/jquery.ui.draggable.js"/>></script>
        <script language="javascript" type="text/javascript" src=<s:url value="/jquery/development-bundle/ui/jquery.ui.resizable.js"/>></script>
        <script language="javascript" type="text/javascript" src=<s:url value="/jquery/development-bundle/ui/jquery.ui.tabs.js"/>></script>
        <script language="javascript" type="text/javascript" src=<s:url value="/jquery/development-bundle/ui/jquery.ui.accordion.js"/>></script>

        <script language="javascript" type="text/javascript" src=<s:url value="/jqgrid/js/jquery.jqGrid.min.js"/>></script>
        <script language="javascript" type="text/javascript" src=<s:url value="/jqgrid/src/grid.loader.js"/>></script>

        <script language="javascript" type="text/javascript" src=<s:url value="/jscript/tcc-sglj-util.js"/>></script>
        <script language="javascript" type="text/javascript" src=<s:url value="/jscript/tcc-sglj-sistema-functions.js"/>></script>
        <script language="javascript" type="text/javascript" src=<s:url value="/jscript/tcc-sglj-cadastro-usuario-log.js"/>></script>
        <script language="javascript" type="text/javascript" src=<s:url value="/jscript/jquery.maskedinput.js"/>></script>
        <script language="javascript" type="text/javascript" src=<s:url value="/jscript/button.add.js"/>></script>


        <script language="javascript" type="text/javascript">
            $(document).ready(function() {

                $("#tabs").tabs();
          
                jQuery("#grid").jqGrid({
                    autowidth: true,
                    height: 'auto',
                    url:'list/user',
                    datatype: "json",
                    colNames:['index', 'nome','email', 'cpf', 'data cadastro'],
                    colModel:[
                        {name: 'id', index: 'id', align : "center", width: "20px"},
                        {name:'name',index:'name'},
                        {name:'email',index:'email'}	,
                        {name:'cpf',index:'cpf', align: "center", width: "40px;", sortable : false},
                        {name:'sign',index:'sign', align: "center", width: "40px", formatter: "date", sortable: true}
                    ],
                    rowNum:20,
                    jsonReader : { repeatitems: true,cell: '', root : "data"},
                    onSelectRow: function(data){
                        alert(data);
                    },
                    mtype: "POST",
                    pager: '#pager2',
                    sortname: 'name',
                    shrinkToFit: true,
                    viewrecords: true,
                    sortorder: "asc",
                    rownumbers: true
                });

               
                jQuery("#grid").navGrid('#pager2',{edit:false,add:false,del:false, search:false})
                .navButtonAdd('#pager2',{
                    caption:"Deletar",
                    buttonicon:"ui-icon-trash",
                    onClickButton: function(){
                        alert("Deleting Row");
                    },
                    position:"first"
                }).navButtonAdd('#pager2',{
                    caption:"Procurar",
                    buttonicon:"ui-icon-search",
                    onClickButton: function(){
                        alert($('#grid').jqGrid('getGridParam','colNames'));
                    },
                    position:"first"
                }).navButtonAdd('#pager2',{
                    caption:"Adicionar",
                    buttonicon:"ui-icon-plus",
                    onClickButton: function(){
                        $('body').append("<div id = 'dialog-search-grid'></grid>");
                        $("#dialog-search-grid").dialog({
                            modal : true,
                            title : "Procurar...",
                            width : 400,
                            open : function() {
                                $("#dialog-search-grid").append("<select id='select-search'></select>");
                                $("#select-search").append("<option value='name'>Nome</option>");
                                $("#select-search").append("<option value='email'>Email</option>");
                                $("#select-search").append("<option value='cpf'>Cpf</option>");
                                $("#select-search").append("<option value='sign'>Data Cadastro</option>");
                                $("#dialog-search-grid").append("<input type='text' id='search-text' />");

                                $('.ui-dialog-buttonpane').find('button:contains("Procurar")').button({
                                    icons: {
                                        primary: 'ui-icon-search'
                                    }
                                });

                                $('.ui-dialog-buttonpane').find('button:contains("Cancelar")').button({
                                    icons: {
                                        primary: 'ui-icon-circle-close'
                                    }
                                });
                            },
                            buttons :{
                                "Procurar" : function() {

                                    $("#grid").setGridParam({'postData':{
                                            field : $("#select-search").val(),
                                            search : $("#search-text").val()
                                        }
                                    }).trigger("reloadGrid");
                                },
                                "Cancelar" : function() {
                                    $("#dialog-search-grid").dialog('close');
                                    $("#dialog-search-grid").remove();
                                }
                            },
                            close : function() {
                                $("#dialog-search-grid").remove();                                    
                            }
                        })
                    },
                    position:"first"
                });


                 

             
            });
        </script>

    </head>
    <body>


        <div id="tabs">
            <ul>
                <li><a href="#tab-administrar">Administrar</a></li>
                <li><a href="#tab-estoque">Estoque</a></li>
                <li><a href="#tab-atendimento">Atendimento</a></li>
            </ul>
            <div id="tab-administrar">
                <div id="tcc-sglj-menu-toolbar">
                    <ul>
                        <li><a href="#" >Clientes</a>
                            <ul>
                                <li><a href="#" id="cadastrar-novo-cliente">Cadastrar cliente</a></li>
                            </ul>
                        </li>
                        <li><a href="#" id="current">Funcionários</a>
                            <ul>
                                <li><a href="#" id="menuacton">Cadastrar novo funcionário</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div id="div-tab-central-administrar">
                    <table id="grid"> </table>
                    <table id="pager2"> </table>
                    <table id="pager3" ></table>
                </div>
            </div>



            <div id="tab-estoque">

            </div>
            <div id="tab-atendimento">

            </div>
        </div>

        <div id="div-load-data-temp"></div>
        <div id="tcc-sglj-warning"></div>
        <div id="tcc-sglj-oper-success"></div>

    </body>
</html>
